﻿<layout name="Public/layout"/>
<div class="sales-list row mart20">
    <div class="col-sm-12">
        <div class="pad20 bgf">
            <div class="tit1 clear">
                <span class="left txt-left txt-blue1"><i class="fa fa-user"></i>签到用户列表</span>

            </div>
            <div class="table-responsive mart20 sale-table" style="overflow-x: inherit">
                <table class="table table-bordered table-striped">
                    <tr>
                        <!--<td width="5%">编号</td>-->
                        <td width="30%"><strong>姓名</strong></td>
                        <td width="30%"><strong>手机</strong></td>
                        <td width="20%"><strong>照片</strong></td>

                        <td><strong>操作</strong></td>
                    </tr>
                    <volist name="userList" id="user">
                        <tr>
                            <!--<td><span >{$user.id}</span></td>-->
                            <td><span >{$user.name}</span></td>
                            <td><span>{$user.phone}</span></td>
                            <td><img src="__ROOT__/Uploads/{$user.pic}" style="width:50px;height:50px;"/></td>

                            <td><a href="#"><span class="text-danger"  style="padding-left:10px;">删除</span></a></td>
                        </tr>

                    </volist>



                </table>

                <div style="padding-right:20px;text-align:center">{$page}</div>
            </div>
        </div>

        <div class="pad20 bgf">
            <div class="tit1 clear">
                <span class="left txt-left txt-blue1"><i class="fa fa-user"></i>虚拟用户列表</span>
                <div class="right ">
                <a href="#" id="openAdd" ><span class="txt-blue">添加 <i class="fa fa-plus-circle"></i></span></a>
                </div>
            </div>
            <div class="table-responsive mart20 sale-table" style="overflow-x: inherit">
                <table class="table table-bordered table-striped">
                    <tr>
                        <!--<td width="5%">编号</td>-->
                        <td width="30%"><strong>姓名</strong></td>
                        <td width="30%"><strong>手机</strong></td>
                        <td width="20%"><strong>照片</strong></td>

                        <td><strong>操作</strong></td>
                    </tr>
                    <volist name="vUserList" id="user">
                        <tr>
                            <td class="hidden vUserId"><span >{$user.id}</span></td>
                            <td><span >{$user.name}</span></td>
                            <td><span>{$user.phone}</span></td>
                            <td><img src="__ROOT__/Uploads/{$user.pic}" style="width:50px;height:50px;"/></td>

                            <td><a href="#" class="openEdit"><span >编辑</span></a><a href="#"><span class="text-danger"  style="padding-left:10px;">删除</span></a></td>
                        </tr>

                    </volist>



                </table>

                <div style="padding-right:20px;text-align:center">{$vPage}</div>
            </div>
        </div>
    </div>

    <style>
        .current{
            margin:5px 10px;
        }
        .num{
            margin:5px 10px;
        }
    </style>

</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1"  aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    添加用户
                </h4>
            </div>
            <div class="modal-body">
                <form role="form" id="userForm" method="post" action="" enctype="multipart/form-data">
                    <input class="hidden" name="id" id="vUserId">
                    <div class="form-group">
                        <label for="name">姓名:</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name">
                    </div>
                    <div class="form-group">
                        <label for="phone">手机号码:</label>
                        <input type="text" class="form-control" id="phone" placeholder="手机号码" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="picFile" style="display: block;">照片:</label>
                        <input class="hidden" id="picEdit" name="picEdit">
                        <img src="__PUBLIC__/img/default.png" style="width:100px;height:100px;box-shadow: 0px 0px 5px black;" id="picPreview">
                        <input type="file" id="picFile" name="pic" style="width:100px;height:100px;margin-top:-100px;opacity: 0;">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="addUserBtn">
                    保存
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    $(function(){
        $("#picFile").change(function(){
            if($(this).val() !=''){
                $("#picEdit").val('');

            }
            $("#picPreview").attr("src",window.URL.createObjectURL(this.files[0]));
        });
        $("#addUserBtn").click(function(){
            if($("#name").val() == ''){
                alert('姓名不能为空');
            }else if($("#phone").val() == ''){
                alert('手机号码不能为空');
            }else if(!checkPhone($("#phone").val())){
                alert('手机号码格式不正确');
            }else if($("#picEdit").val() == ''){
                if($("#picFile")[0].files.length == 0){
                    alert('照片不能为空');
                }else if(!checkImgType($("#picFile").val())){
                    alert('照片格式不正确');
                }else{
                    $("#userForm").submit();
                }
            }else{
                $("#userForm").submit();
            }
        });


        $(".openEdit").click(function(){
            $("#myModalLabel").text('编辑用户');
            var vUserId = $(this).parent().siblings(".vUserId").text();
            $.getJSON("{:U('Admin/Index/getVirtualUserById')}",{id:vUserId},function(data){
                if(data){
                    $("#vUserId").val(data.id);
                    $("#name").val(data.name);
                    $("#phone").val(data.phone);
                    $("#picPreview").attr("src","__ROOT__/Uploads/"+data.pic);
                    $("#picEdit").val(data.pic);
                    $("#myModal").modal("show");
                }

            });

        });

        $("#openAdd").click(function(){
            $("#myModalLabel").text('添加用户');
            $("#userForm")[0].reset();
            $("#picPreview").attr("src","__PUBLIC__/img/default.png");
            $("#myModal").modal("show");

        });

    });
</script>